<template>
  <div class="my-table-content">
    <div class="search-bar">
      <div class="search-bar-inner">
        <el-form
          ref="searchFormRef"
          :inline="true"
          :model="queryParams"
          class="demo-form-inline"
          size="small"
        >
          <el-form-item label="分类" prop="classification">
            <el-select v-model="queryParams.classification" placeholder="请选择分类" clearable>
              <el-option
                v-for="(option, index) in []"
                :key="index"
                :label="option.label"
                :value="option.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="部门名称" prop="deptName">
            <el-select v-model="queryParams.deptName" placeholder="请选择部门名称" clearable>
              <el-option
                v-for="(option, index) in []"
                :key="index"
                :label="option.label"
                :value="option.value"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item class="form-btn-group">
            <el-button type="primary" @click="queryData">查询</el-button>
            <el-button type="primary" @click="resetQuery">重置</el-button>

            <el-button type="primary" @click="handleAdd">新增</el-button>

            <el-button type="danger" @click="batchDelete">批量删除</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="common-panel">
      <div class="panel-body">
        <div class="my-table-wrapper">
          <el-table
            ref="multipleTable"
            class="custom-table cell-no-padding"
            border
            :stripe="false"
            style="width: 100%"
            tooltip-effect="dark"
            :data="tableData"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="50" />
            <el-table-column label="分类" :show-overflow-tooltip="true" prop="classification" />
            <el-table-column label="创建名称" :show-overflow-tooltip="true" prop="createName" />
            <el-table-column label="部门名称" :show-overflow-tooltip="true" prop="deptName" />
            <el-table-column label="身份证" :show-overflow-tooltip="true" prop="id" />
            <el-table-column label="提交时间" :show-overflow-tooltip="true" prop="addTime" />
            <el-table-column label="进程ID" :show-overflow-tooltip="true" prop="processId" />
            <el-table-column label="状态" :show-overflow-tooltip="true" prop="state" />
            <el-table-column label="模板ID" :show-overflow-tooltip="true" prop="templateId" />
            <el-table-column label="标题" :show-overflow-tooltip="true" prop="title" />
            <el-table-column label="类型" :show-overflow-tooltip="true" prop="type" />

            <el-table-column label="操作" width="200">
              <template #default="scope">
                <el-button type="primary" link class="table-button" @click="handleUpdate(scope.row)"
                  >修改</el-button
                >
                <el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="panel-footer">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          v-model:current-page="queryParams.pageNum"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[10, 30, 50, 100]"
          :total="total"
          @current-change="queryData"
          @size-change="handleSizeChange"
        />
      </div>
    </div>

    <!-- <customDialog
      :options="dialogOptions"
      @confirm="handleConfirm"
      @close="handleClose"
    ></customDialog> -->
  </div>
</template>

<script setup>
  import { onMounted, reactive, ref } from 'vue';

  // import customDialog from './components/customDialog.vue';
  import { useHandleData } from '@/hooks/useHandleData/index';
  import {
    deleteSurveyTemplate as deleteData,
    getSurveyTemplateList as queryList,
  } from '@/api/satisfactionTemplate.js';

  const queryFormState = {
    pageNum: 1,
    pageSize: 10,
    classification: undefined,
    deptName: undefined,
  };
  // 查询表单form
  const queryParams = reactive({ ...queryFormState });

  // 表格加载loading
  const tableLoading = ref(false);
  // 表格数据
  const tableData = ref([]);
  // 总数
  const total = ref(0);

  // 改变每页显示数量
  function handleSizeChange(val) {
    queryParams.pageSize = val;
    queryData();
  }
  // 重置查询条件
  function resetQuery() {
    let pageSize = queryParams.pageSize;
    Object.assign(queryParams, queryFormState);
    queryParams.pageSize = pageSize;
    queryData();
  }

  // 查询数据
  async function queryData() {
    tableLoading.value = true;
    try {
      let queryResult = await queryList(queryParams);
      tableData.value = queryResult.data.records;
      total.value = queryResult.data.total;
    } catch (e) {
      console.log(e);
    } finally {
      tableLoading.value = false;
    }
  }
  // 多选
  const multipleSelection = ref([]);
  function handleSelectionChange(val) {
    multipleSelection.value = val;
  }
  // 批量删除
  function batchDelete() {
    console.log(multipleSelection.value);
  }
  // 删除数据
  async function handleDelete(row) {
    await useHandleData(deleteData, row.id, '确认删除');
    queryData();
  }

  let dialogOptions = reactive({
    title: '',
    visible: false,
    defaultValue: {},
    width: 500,
  });
  // 新增
  function handleAdd() {
    dialogOptions.title = '新增';
    dialogOptions.visible = true;
    dialogOptions.defaultValue = {};
  }

  function handleConfirm() {
    dialogOptions.visible = false;
    queryData();
  }

  function handleClose() {
    dialogOptions.visible = false;
    dialogOptions.defaultValue = {};
  }

  function handleUpdate(row) {
    dialogOptions.title = '修改';
    dialogOptions.visible = true;
    dialogOptions.defaultValue = row;
  }

  onMounted(async () => {
    queryData();
  });
</script>

<style lang="scss" scoped></style>
